<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="./lib/testHelper.js"></script>
    <script src="../dist/quark-renderer.js"></script>
    <style>
        html {
            font-family: Arial;
            font-size: 14px;
        }
        .control {
            position: fixed;
            width: 180px;
            bottom: 0;
            top: 0;
            right: 0;
            z-index: 99999;
            font-family: Arial, Helvetica, sans-serif;
            padding: 10px;
            background: #dee;
            box-shadow: 0 0 5px #888;
            font-size: 12px;
            overflow: auto;
        }
        .control-block {
            padding-left: 5px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 5px;
        }
        button {
            margin: 2px;
        }
        .storage-key {
            color: #888;
        }
        #storage-container {
            padding: 5px 0;
        }
        label {
            padding-left: 5px;
            padding-right: 5px;
        }
    </style>
</head>
<body>

    <script>
        var _updaters = {};
    </script>

    STATE are stored to URL hash to enable to compare <br>
    SVG renderer and Canvas renderer in <a href="-cases.html">-cases.html</a>.

    <div class="control">

        <div class="control-block">
            STATE: <br>
            <div id="storage-container"></div>
        </div>



        <div class="control-block">
            <label>rotation:</label>
            <button onclick="startRotation();">Start</button>
            <button onclick="stopRotation();">Stop</button>
            <button onclick="updateToURL('rotation', 0.1 * Math.PI);">0.1 * Math.PI</button>
            <button onclick="updateToURL('rotation', -0.3 * Math.PI);">-0.3 * Math.PI</button>
            <button onclick="removeToURL('rotation');">Remove</button>
            <script>
            _updaters.rotation = function () {
                var rotation = _storage.rotation;
                for (var i = 0; i < _elList1.length; i++) {
                    var shape = _elList1[i];
                    shape.attr({
                        rotation: clone(rotation)
                    });
                }
                for (var i = 0; i < _elList2.length; i++) {
                    var shape = _elList2[i];
                    shape.attr({
                        rotation: clone(rotation)
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>origin:</label>
            <button onclick="updateToURL('origin', [150, 70]);">[150, 70] (right-bottom-corner)</button>
            <button onclick="removeToURL('origin');">Remove</button>
            <script>
            _updaters.origin = function () {
                var origin = _storage.origin;
                for (var i = 0; i < _elList1.length; i++) {
                    var shape = _elList1[i];
                    shape.attr({
                        origin: clone(origin)
                    });
                }
                for (var i = 0; i < _elList2.length; i++) {
                    var shape = _elList2[i];
                    shape.attr({
                        origin: clone(origin)
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>position:</label>
            <button onclick="updateToURL('position', [75, 35]);">[75, 35]</button>
            <button onclick="updateToURL('position', [-75, -35]);">[-75, -35]</button>
            <button onclick="removeToURL('position');">Remove</button>
            <script>
            _updaters.position = function () {
                var position = _storage.position;
                for (var i = 0; i < _elList1.length; i++) {
                    var shape = _elList1[i];
                    shape.attr({
                        position: clone(position)
                    });
                }
                for (var i = 0; i < _elList2.length; i++) {
                    var shape = _elList2[i];
                    shape.attr({
                        position: clone(position)
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>scale:</label>
            <button onclick="updateToURL('scale', [2, 2]);">[2, 2]</button>
            <button onclick="updateToURL('scale', [0.5, 0.5]);">[0.5, 0.5]</button>
            <button onclick="removeToURL('scale');">Remove</button>
            <script>
            _updaters.scale = function () {
                var scale = _storage.scale;
                for (var i = 0; i < _elList1.length; i++) {
                    var shape = _elList1[i];
                    shape.attr({
                        scale: clone(scale)
                    });
                }
                for (var i = 0; i < _elList2.length; i++) {
                    var shape = _elList2[i];
                    shape.attr({
                        scale: clone(scale)
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>textBackground:</label>
            <button onclick="updateToURL('hasBg', 1);">Add</button>
            <button onclick="removeToURL('hasBg');">Remove</button>
            <script>
            _updaters.hasBg = function () {
                var hasBg = _storage.hasBg;
                for (var i = 0; i < _elList1.length; i++) {
                    var shape = _elList1[i];
                    shape.attr({
                        style: {
                            textBorderRadius: 3,
                            textBackgroundColor: 'rgba(0, 255, 0, 0.3)',
                            textBorderColor: '#191933',
                            textBorderWidth: 2,
                            textBoxShadowBlur: 5,
                            textBoxShadowColor: '#1099ee',
                            textBoxShadowOffsetX: 2,
                            textBoxShadowOffsetY: 5
                        }
                    });
                }
                for (var i = 0; i < _elList2.length; i++) {
                    var shape = _elList2[i];
                    shape.attr({
                        style: {
                            textBorderRadius: 8,
                            textBackgroundColor: 'rgba(0, 255, 0, 0.3)',
                            textBorderColor: '#191933',
                            textBorderWidth: 2,
                            textBoxShadowBlur: 5,
                            textBoxShadowColor: '#1099ee',
                            textBoxShadowOffsetX: 2,
                            textBoxShadowOffsetY: 5
                        }
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>textPadding:</label>
            <button onclick="updateToURL('textPadding', [10, 20, 30, 40]);">[10, 20, 30, 40]</button>
            <button onclick="updateToURL('textPadding', 50);">50</button>
            <button onclick="removeToURL('textPadding');">Remove</button>
            <script>
            _updaters.textPadding = function () {
                for (var i = 0; i < _elList1.length; i++) {
                    var shape = _elList1[i];
                    shape.attr({
                        style: {
                            textPadding: clone(_storage.textPadding)
                        }
                    });
                }
                for (var i = 0; i < _elList2.length; i++) {
                    var shape = _elList2[i];
                    shape.attr({
                        style: {
                            textPadding: clone(_storage.textPadding)
                        }
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>textAlign:</label>
            <button onclick="updateToURL('textAlign', 'left');">'left'</button>
            <button onclick="updateToURL('textAlign', 'center');">'center'</button>
            <button onclick="updateToURL('textAlign', 'right');">'right'</button>
            <button onclick="removeToURL('textAlign');">Remove</button>
            <script>
            _updaters.textAlign = function () {
                var textAlign = _storage.textAlign;
                for (var i = 0; i < _elList1.length; i++) {
                    var shape = _elList1[i];
                    shape.attr({
                        style: {
                            textAlign: textAlign
                        }
                    });
                }
                for (var i = 0; i < _elList2.length; i++) {
                    var shape = _elList2[i];
                    shape.attr({
                        style: {
                            textAlign: textAlign
                        }
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>textVerticalAlign:</label>
            <button onclick="updateToURL('textVerticalAlign', 'top');">'top'</button>
            <button onclick="updateToURL('textVerticalAlign', 'middle');">'middle'</button>
            <button onclick="updateToURL('textVerticalAlign', 'bottom');">'bottom'</button>
            <button onclick="removeToURL('textVerticalAlign');">Remove</button>
            <script>
            _updaters.textVerticalAlign = function (textVerticalAlign) {
                var textVerticalAlign = _storage.textVerticalAlign;
                for (var i = 0; i < _elList1.length; i++) {
                    var shape = _elList1[i];
                    shape.attr({
                        style: {
                            textVerticalAlign: textVerticalAlign
                        }
                    });
                }
                for (var i = 0; i < _elList2.length; i++) {
                    var shape = _elList2[i];
                    shape.attr({
                        style: {
                            textVerticalAlign: textVerticalAlign
                        }
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>Add '\n' at char index 3 (only for green rect):</label>
            <button onclick="updateToURL('addLineBreak', true);">Add</button>
            <button onclick="removeToURL('addLineBreak');">Remove</button>
            <script>
            _updaters.addLineBreak = function () {
                var textVerticalAlign = _storage.textVerticalAlign;
                for (var i = 0; i < _elList1.length; i++) {
                    var shape = _elList1[i];
                    var text = shape.__qr_test_text;
                    text = text.substr(0, 3) + '\n' + text.substr(3, text.length - 1);
                    shape.attr({
                        style: {
                            text: text
                        }
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>Add truncate (only for red rect):</label>
            <button onclick="updateToURL('truncate', {outerWidth: 50, outerHeight: 40, ellipsis: '...'});">{outerWidth: 50, outerHeight: 40, ellipsis: '...'}</button>
            <button onclick="updateToURL('truncate', {outerWidth: 5, outerHeight: 20, ellipsis: '...', placeholder: '-'});">{outerWidth: 5, outerHeight: 20, ellipsis: '...', placeholder: '-'});</button>
            <button onclick="removeToURL('truncate');">Remove</button>
            <script>
            _updaters.truncate = function () {
                var truncate = clone(_storage.truncate);
                for (var i = 0; i < _elList1.length; i++) {
                    var shape = _elList1[i];
                    var text = '';
                    for (var j = 0; j < 5; j++) {
                        text += shape.__qr_test_text;
                    }
                    shape.attr({
                        style: {
                            text: text,
                            truncate: truncate
                        }
                    });
                }
            };
            </script>
        </div>

    </div>


    <div id="main1" style="width:1000px;height:700px;"></div>


    <script type="text/javascript">
        var clone = QuarkRenderer.dataUtil.clone;
        var encodeHTML = testHelper.encodeHTML;
        var _timer;
        var _storage = {};
        var _elList2 = [];
        var _elList1 = [];
        var _rotating = false;


        function init() {
            initBase();
            testHelper.initURLStorage(updateView);
        }

        function initBase() {
            var qr1 = QuarkRenderer.init(document.getElementById('main1'), {
                renderer: window.__QRENDER__DEFAULT__RENDERER__
            });

            var text = 'ThisIsText中文';
            var group = new QuarkRenderer.Group({
                position: [200, 50]
            });
            qr1.add(group);
            group.add(new QuarkRenderer.Rect({
                style: {
                    fill: 'green'
                },
                shape: {
                    x: 0, y: 0, width: 300, height: 100
                }
            }));
            var textEl = new QuarkRenderer.Text({
                __qr_test_text: text,
                style: {
                    text: text
                }
            });
            group.add(textEl);
            _elList1.push(textEl);

            var group2 = new QuarkRenderer.Group({
                position: [200, 350]
            });
            qr1.add(group2);
            group2.add(new QuarkRenderer.Rect({
                shape: {
                    x: 0, y: 0, width: 300, height: 100
                },
                style: {
                    fill: 'rgba(22, 55, 99)'
                }
            }));
            var textEl2 = new QuarkRenderer.Text({
                style: {
                    fill: '#eeaaff',
                    text: [
                        '{j|' + text + '}',
                        '我是 Rect Text, textDistance: 20',
                        '整体的 textAlign textVerticalAlign 取默认值'
                    ].join('\n'),
                    textFill: 'red',
                    font: '10px Arial',
                    rich: {
                        j: {
                            font: '16px Arial',
                            textFill: '#922889',
                            textVerticalAlign: 'top'
                        }
                    }
                }
            });
            group2.add(textEl2);
            _elList2.push(textEl2);
        }

        window.updateToURL = function (key, value) {
            testHelper.updateToHash(key, clone(value));
        };

        window.removeToURL = function (key) {
            // key with undefined value will be removed after JSON.stringify();
            testHelper.updateToHash(key, void 0);
            // force reload whether search is changed.
            location.reload();
        };

        function updateView() {
            updateStorage();
            updateStorageView();

            for (var updaterName in _updaters) {
                if (_updaters.hasOwnProperty(updaterName)) {
                    // Do not set attr, test the default cases.
                    if (!_storage.hasOwnProperty(updaterName)) {
                        continue;
                    }
                    _updaters[updaterName]();
                }
            }

            nextRotate();
        }

        function updateStorage() {
            _storage = testHelper.getAllFromHash();
        }

        function updateStorageView() {
            var html = [];
            for (var key in _storage) {
                if (_storage.hasOwnProperty(key)) {
                    html.push(
                        '<span class="storage-key">' + encodeHTML(key) + '</span>:&nbsp;&nbsp;'
                        + encodeHTML(JSON.stringify(_storage[key]))
                    );
                }
            }
            var dom = document.getElementById('storage-container');
            dom.innerHTML = html.join('<br>');
        }

        function nextRotate() {
            if (_rotating) {
                setTimeout(function () {
                    var rotation = _storage.rotation || 0;
                    rotation += 0.01;
                    rotation %= Math.PI * 2;
                    testHelper.updateToHash('rotation', rotation);
                }, 50);
            }
        }

        function startRotation() {
            _rotating = true;
            nextRotate();
        };

        function stopRotation() {
            _rotating = false;
        };


        init();


    </script>


</body>
</html>